<template>
  <div class="login-container">
		<transition>
			<div v-show="show" class="login">
				<div class="l"></div>
				<div class="r">
					<el-tabs v-model="type" stretch>
						<el-tab-pane label="短信登录" name="sms" >
								<el-input placeholder="手机号" v-model="formData.phone" ></el-input>
								<el-input placeholder="验证码" v-model="formData.code"  >
									<el-button slot="append" type="primary" @click="onSend" :disabled="!formData.phone || sendTime<60">{{sendLabel}}</el-button>
								</el-input>
								<el-button type="primary"  @click="login">登录</el-button>
						</el-tab-pane>
						<el-tab-pane label="密码登录" name="password">
								<el-input type="text" placeholder="用户名" v-model="formData.username" ></el-input>
								<el-input type="password" placeholder="密码" v-model="formData.password" ></el-input>
								<el-button type="primary" @click="login">登录</el-button>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</transition>
  </div>
</template>

<script>

export default {
	data(){
		return {
			type: 'sms',   //手机号短信登录sms，用户名密码登录password
			formData: {
				phone: '',
				code: '',
				username: '',
				password: ''
			},
			sendTime: 60,
			timeId: null,
			show: false
		}
	},
	methods:{
		login(){
			const params = {
				type: this.type
			}
			if(this.type == 'sms'){
				params.phone = this.formData.phone
				params.code = this.formData.code
			}else{
				params.username = this.formData.username
				params.password = this.formData.password
			}
			this.axios.post('/login',params).then((data) => {
				if(data.code == 0){
					this.$router.push("/Main")
				}
			})
		},
		onSend(){
			//先校验手机号，通过校验后电泳发送验证码接口
			if(!/^1\d{10}$/.test(this.formData.phone)){
				this.$message.error('手机号格式不正确')
				return
			}

			this.getCode()
			this.sendTime--
			this.timeId = setInterval(() => {
				this.sendTime--
				if(this.sendTime == 0){
					clearInterval(this.timeId)
					this.sendTime = 60
				}
			},1000)
		},
		getCode() {
			this.axios.post('/code',{
				phone: this.formData.phone
			})
		}
	},
	mounted(){
		// setTimeout(() => {
		// 	const el = document.querySelector(".login")
		// 	el.className = 'login show'
		// },0)
		this.show = true
	},
	computed:{
		sendLabel(){
			if (this.sendTime < 60){
				return this.sendTime + '秒后重发'
			}
			return '发送验证码'
		}
	}
}
</script>

<style lang="sass" scoped>
.login-container
	display: flex
	justify-content: center
	align-items: center
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: url(~@/assets/img/login-bg.png) no-repeat
	background-size: cover
	.login
		display: flex
		width: 800px
		height: 400px
		border-radius: 10px
		overflow: hidden
		background: #fff
		transition: .5s
		// opacity: 0
		// transform: translateY(10%) scale(.8)
		// &.show
		// 	transform: translateY(0) scale(1)
		// 	opacity: 1

	.l
		width: 490px
		background: url(~@/assets/img/login-left.png) no-repeat
		background-size: cover
	.r
		flex: 1
		padding: 60px 40px
		.el-input
			margin-bottom: 15px
		.el-tab-pane>.el-button
			width: 100%

	.v-enter
		opacity: 0
		transform: translateY(10%) scale(.8)
	//在现实的整个过程都有calss，定义过渡
	.v-enter-cative
		transition: .5s
	//下面两个跟标签本身样式一样
	// .v-enter-to
	// .v-leave
	// .v-leave-active
	// .v-leave-to
</style>
